/**
 * author：lyt
 * createdate:2020.7.
 * 
 **/
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:login/util/UserInfo.dart';
import '../config/SystemConfig.dart';
import 'dart:convert';
import 'package:flutter/cupertino.dart';
// import 'package:like_button/like_button.dart';

class FriendsPage extends StatefulWidget {
  FriendsPage({Key key}) : super(key: key);
  @override
  _FriendsPageState createState() => _FriendsPageState();
}

class _FriendsPageState extends State<FriendsPage> {
  //封装分层
  //构建顶部图片和头像区域的组件，万物皆widget组件
  
  

 
  //当前登录用户
  Map userInfo;
  //List Wigate数组
  List<Widget> _widgetList = [];
  //广场加载数据的列表,这是一个对应的是data
  List _dataList = [];

//页面在初始化时自动加载的一个方法
  @override
  void initState() {
    super.initState();
    this._init();
  }

  //业务初始化方法
  void _init() async {
    //初始化加载当前已经登录过的用户
    Map tempUserInfo = await UserInfo.getUserInfo();
    setState(() {
      this.userInfo = tempUserInfo;
    });
    //查询最新的内容
    _queryList();
  }

  //点赞
  void _addComent(contentId) async {
    //动态类型
    //请求后台
    String api = SystemConfig.BASE_URL +
        '/comment/addComment?contentId=' +
        contentId.toString() +
        "&appUserId=" +
        this.userInfo['id'].toString();
    print(api + "====+++"); //损耗性能
    Response response = await Dio().get(api);
    Map result = json.decode(response.toString());
    if (response.statusCode == 200 && result != null && result['success']) {
      //遍历数据区集合，并更新其点赞数据
      for (int i = 0; i < this._dataList.length; i++) {
        if (contentId == this._dataList[i]['id']) {
          this._dataList[i]['myCommentCnt']++;
          this._dataList[i]['commentCnt']++;
          break;
        }
      }
      //当this._datalist发生变化后，调用刷新方法
      this._refreshListViewWidget();
    }
  }

  //取消点赞
  void _canCelComment(contentId) async {
    String api = SystemConfig.BASE_URL +
        '/comment/cancelComment?contentId=' +
        contentId.toString() +
        "&appUserId=" +
        this.userInfo['id'].toString();

    Response response = await Dio().get(api);
    Map result = json.decode(response.toString());
    if (response.statusCode == 200 && result != null && result['success']) {
      for (int i = 0; i < this._dataList.length; i++) {
        if (contentId == this._dataList[i]['id']) {
          this._dataList[i]['myCommentCnt']--;
          this._dataList[i]['commentCnt']--;
          break;
        }
      }
      //当this._datalist发生变化后，调用刷新方法
      this._refreshListViewWidget();
    }
  }

  //查询数据
  void _queryList() async {
    //获得当前用户
    // UserInfo = Storage.getString(key)

    //请求后台 //SystemConfig.BASE_URL+相对地址
    String api = SystemConfig.BASE_URL +
        '/content/listNewContent?currAppUserId=${this.userInfo['id']}';

    // String api = SystemConfig.BASE_URL +
    // '/content/listNewContent?currAppUserId='+this.userInfo['appUserId'];
    print(api + "====+++++++++++++++");

    //先拿数据
    Response response = await Dio().get(api);
    print(response.toString());
    Map result = json.decode(response.toString());
    if (response.statusCode == 200 && result != null && result['success']) {
      //从response中通过json解码获得数据数组data，并将data数组直接赋值给类的局部私有变量——dataList

      this._dataList = result['data'];

      this._refreshListViewWidget();
    } else {
      Fluttertoast.showToast(
          msg: result['message'],
          toastLength: Toast.LENGTH_LONG,
          gravity: ToastGravity.BOTTOM);
    }
  }

  void _onRefresh() async {
    this._queryList();
  }

  void _refreshListViewWidget() {
    setState(() {
      this._widgetList = this._buildListViewWigetList();
    });
  }

  //构建listview （顶部区域+图文数据区域）
  List<Widget> _buildListViewWigetList() {
    //返回listview组件列表数组
    List<Widget> listViewWidgetList = [];
    //将顶部头像区域加入到集合
    listViewWidgetList.add(_buildUserTopImage());
    //图文内容区域绑定
    //_dataList对应是返回的data数据，通过map方法，实现迭代（遍历），将每一条图文数据传给——buildItem，实现数据绑定
    List<Widget> dataList = this._dataList.map((item) {
      return _buildItem(item);
    }).toList();

    //最终获得body区域所有的Widget,并将放到listViewWidgetList
    listViewWidgetList.addAll(dataList);
    return listViewWidgetList;
  }

//构建顶部图片和头像区域的组件
  Widget _buildUserTopImage() {
    return Container(
      //顶部区域设定一个固定的高度
      height: 240,
      //叠加
      child: Stack(
        children: <Widget>[
          Container(
            //自适应100%
            width: double.infinity,
            child: Image.asset(
              'images/f.jpg',
              fit: BoxFit.cover,
            ),
          ),
          //定位布局，用定位布局实现底部一张图，右下角一个头像和昵称
          Align(
            //布局（-1，1）
            //图像位置x,y显示在右下角//(0,0)显示在正中间
            alignment: Alignment(1, 1), //坐标设置
            child: Row(
              //行布局
              mainAxisAlignment:MainAxisAlignment.end, //水平对齐：居中水平方向，主轴end最后面的位置，start是前面的位置
              crossAxisAlignment: CrossAxisAlignment.end, //次轴 ，上下对齐：居中
              children: <Widget>[
                //昵称
                Container(
                  margin: EdgeInsets.only(bottom: 25.0),
                  child: Text(
                    '${this.userInfo['nickname']}',
                    style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black87),
                  ),
                ),

                Container(
                  //设置头像宽度
                  width: 60.0,
                  height: 60.0,
                  //设置外边距
                  margin: EdgeInsets.all(15.0),
                  //设置Container装饰
                  decoration: BoxDecoration(
                    border: Border.all(width: 2.0, color: Colors.white),
                    //设置宽度为2的白色边框
                    borderRadius: //设置圆角
                        new BorderRadius.all(new Radius.circular(30.0)),
                  ),
                  child: ClipOval(
                    //ClipOval：flutter自带的圆形头像组件
                    child: Image.network(
                      SystemConfig.BASE_URL +
                          "/" +
                          this.userInfo['headImgUrl'].toString(),
                      fit: BoxFit.cover,
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  //构建左边
  Widget _buildLeftHeadPhoto(String url) {
    return Container(
      //设置头像宽度
      width: 50.0,
      //设置头像高度
      height: 50.0,
      //头像距离右侧文字距离
      margin: EdgeInsets.only(right: 15.0),
      child: ClipOval(
        child: url != null
            ? Image.network(SystemConfig.BASE_URL + url, fit: BoxFit.cover)
            : Image.asset('images/2.jpg', fit: BoxFit.cover),
      ),
    );
  }

  //构建右边内容组件
  Widget _buildRightContent(Map item) {
    return Expanded(
      //Expanded：填充父控件组件
      //拓展布局expanded的作用它的flex,权重，横竖屏比例
      //flex权重，这里只有一个Expanded ,所以1就代表填充所有除了左侧头像区域外的右侧所有宽度
      //1，2分别占1/3 、2/3
      flex: 1,
      child: Column(
        //列布局
        mainAxisAlignment: MainAxisAlignment.start, //主轴垂直方向
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          //昵称
          Container(
            margin: EdgeInsets.only(bottom: 5.0),
            child: item['nickname'] == null
                ? Text(
                    '昵称为空',
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
                  )
                : Text(
                    item['nickname'].toString(),
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
                  ),
          ),
          //发表时间
          Container(
            margin: EdgeInsets.only(bottom: 5.0),
            child: item['createDtMMDD'] == null
                ? Text('日期未知',
                    style: TextStyle(color: Colors.black38, fontSize: 14.0))
                : Text(
                    item['createDtMMDD'],
                    style: TextStyle(color: Colors.black38, fontSize: 14.0),
                  ),
          ),
          //文字内容
          Container(
            margin: EdgeInsets.only(bottom: 5.0),
            child: item['content'] == null
                ? Text('这是我发表的内容', style: TextStyle(fontSize: 16.0))
                : Text(
                    item['content'],
                    style: TextStyle(fontSize: 16.0),
                  ),
          ),
          //图片
          Container(
            width: 200.0,
            height: 200.0,
            margin: EdgeInsets.only(right: 20.0),
            child: item['imgUrl'] == null
                ? Image.asset('images/2.jpg', fit: BoxFit.cover)
                : Image.network(
                    //加载网络图片
                    SystemConfig.BASE_URL + item['imgUrl'],
                    fit: BoxFit.cover),
          ),
          //点赞
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(right: 20.0),
                child: Row(
                  children: <Widget>[
                    

                    //三元表达式，当点赞为0时，显示为空星。否则为实星
                    item['myCommentCnt'] == 0
                        ? InkWell(
                            child: Icon(Icons.star_border),
                            onTap: () {
                              this._addComent(item['id']);
                            },
                          )
                        : InkWell(
                            child: Icon(Icons.star),
                            onTap: () {
                              this._canCelComment(item['id']);
                            },
                          ),
                    Text("${item['commentCnt']}")
                  ],
                ),
              ),
              
            ],
              
          )
        ],
      ),
    );
  }

  //构建内容项
  //widget组件的合并成为一个新的widget
  //构建每一条广场圈信息组件
  Widget _buildItem(Map item) {
    
    return Container(
      //设置宽度自适应100%
      width: double.infinity,
      //设置内距
      padding: EdgeInsets.all(15.0),
      //使用行布局，左边放用户头像，右侧放内容
      color: Colors.blue[50],
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          //左侧头像
          _buildLeftHeadPhoto(item['headImgUrl']), //引用左边组件
          //右侧内容
          _buildRightContent(item), //引用右边组件
        ],
      ),
    );
  }


  Widget build(BuildContext context) {
    return Scaffold(
      //AppBar页面顶部的工具栏

      appBar: AppBar(
        //实例化ICON,图标按钮
        leading: IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              //路由跳转到设置页面
              Navigator.pushNamed(context, '/setting');
            }),
        //顶部标题
        title: Text('广场'),
      ),

      body:RefreshIndicator(
          //下拉刷新组件
          //ListView：可无限滚动的组件，可包含任意组件
          child: ListView(
            children: this._widgetList,
          ),
          onRefresh: () async {
            this._onRefresh();
          }),

          

      //设置浮动按钮的位置,如果不指定，则默认为endFloat
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      //实例化浮动按钮对象
      //flutter自带的浮动按钮组件
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add), //加号用在导航栏上，叠加，右下角浮动隐藏
          onPressed: () {
            //on开头基本为事件
            //路由跳转到添加页面
            Navigator.pushNamed(context, '/add');
          }),
    );
  }
}

